<template>
  <div class="product-page" scroll-container>
    <Banner :bannerimgs="bannerimgs" />
    
    <!-- 分类导航栏 -->
    <div class="category-nav" :class="{ 'is-sticky': isSticky }">
      <div class="nav-container">
        <div 
          v-for="(item, index) in products" 
          :key="index"
          class="nav-item"
          :class="{ active: currentCategory === item.categoryName }"
          @click="handleCategoryClick(item.categoryName)"
        >
          {{ item.categoryName }}
        </div>
      </div>
    </div>

    <!-- 回到顶部按钮 -->
  
    <el-backtop :right="40" :bottom="40" >
        <el-icon><Top /></el-icon>
    </el-backtop>
    <div class="tc" v-for="(productItem, id) in products" :key="id" :ref="el => { if(el) categoryRefs[productItem.categoryName] = el }">
      <ProductImgCard :imgs="productItem" ></ProductImgCard>
    </div>

    <Bottom></Bottom>
  </div>

</template>

<script setup>
import {ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {getBanner,getProduct} from '@/apis/prodcut'
import Banner from '@/components/Banner.vue'
import ProductImgCard from './components/ProductImgCard.vue'
import Bottom from '@/components/Bottom.vue'


const router = useRouter()
const bannerimgs=ref([])
const products=ref([])
const isSticky=ref(false)
const currentCategory=ref('')


// DOM 引用
const categoryRefs = ref({})

// 生命周期钩子
onMounted(() => {
  findBanner()
  findProduct()
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})



const findBanner = async () => {
    const res = await getBanner()
      bannerimgs.value = res.data
}

const findProduct = async () => {
  const res = await getProduct()
  products.value = res.data
  nextTick(() => {
        currentCategory.value = products.value[0]?.categoryName || ''
      })
}

const isScrolling = ref(false)
const scrollTimeout = ref(null)

const handleCategoryClick = (categoryName) => {
  currentCategory.value = categoryName
  isScrolling.value = true
  const element = categoryRefs.value[categoryName]
  if (element) {
    const rect = element.getBoundingClientRect()
    const targetPosition = window.scrollY + rect.top - 120
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    })
    
    // 设置一个较短的延时来重置滚动状态
    clearTimeout(scrollTimeout.value)
    scrollTimeout.value = setTimeout(() => {
      isScrolling.value = false
    }, 500)
  }
}

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const handleScroll = () => {
  // 控制分类导航栏吸顶
  isSticky.value = window.scrollY > 300
  
  
  // 只有在非滚动状态下才更新当前分类
  if (!isScrolling.value) {
    updateCurrentCategory()
  }
}

const updateCurrentCategory = () => {
  const scrollPosition = window.scrollY
  let found = false
  let closestCategory = null
  let minDistance = Infinity
  
  for (const item of products.value) {
    const element = categoryRefs.value[item.categoryName]
    if (element) {
      const rect = element.getBoundingClientRect()
      // 计算元素中心点到视口中心点的距离
      const elementCenter = rect.top + rect.height / 2
      const viewportCenter = window.innerHeight / 2
      const distance = Math.abs(elementCenter - viewportCenter)
      
      // 如果元素在视口范围内
      if (rect.top <= viewportCenter && rect.bottom >= viewportCenter) {
        if (distance < minDistance) {
          minDistance = distance
          closestCategory = item.categoryName
        }
      }
    }
  }
  
  if (closestCategory) {
    currentCategory.value = closestCategory
  } else if (scrollPosition < 100) {
    currentCategory.value = products.value[0]?.categoryName || ''
  }
}

</script>


<style lang="scss" scoped>
.product-page {
  padding: 0px;
  background-color: #ffffff;
}

.category-nav {
  background: linear-gradient(to right, #f8f9fa, #ffffff, #f8f9fa);
  padding: 10px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
  z-index: 99;
top: -100%;
left: 50%;
  position: fixed;
  
  &.is-sticky {
    position: fixed;
    top: 65px; // 主菜单的高度
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    opacity: 1;
  }
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.nav-item {
  cursor: pointer;
  padding: 5px 15px;
  border-radius: 20px;
  transition: all 0.3s ease;
  font-size: 15px;
  color: #666;
  background: transparent;

  &:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
  }

  &.active {
    color: #fff;
    background: #333;
    font-weight: 500;
  }
}



.package-list {
  max-width: 1200px;
  margin: 0 auto;
}

.package-card {
  border: none;
  border-radius: 10px;
  transition: all 0.3s ease;
  background-color: #ffffff;
  overflow: hidden;
  background: #f3f4f682;

}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.package-image {
  width: 100%;
  height: 380px;
  overflow: hidden;

  margin-bottom: 15px;
}


.package-title {
  font-size: 1.2em;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #333;
}

.price-symbol {
  font-size: 0.8em;
}

.about {
  position: relative;
  padding-left: 15px;
  padding-right: 10px;
}

.icon {
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: 0px;
  right: 15px;
}

.el-col {
  margin-bottom: 40px;
}

.el-image{
  width: 100%;
  height: 100%;
}

.explain {
  margin-top: 30px;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
